<template>
	<view class="container">
		<view class="guizeHeard">
			<text>积分排行规则</text>
		</view>
		<view class="guizeMain">
			<view class="guizeMainCase">
				<view class="" v-for="(i, k) in mainList" :key="k">
					<view class="guizeMainTitle">
						<text>{{i.title}}</text>
					</view>
					<view class="guizeMainText" v-for="(j, g) in i.list" :key="g">
						<rich-text :nodes="j"></rich-text>
					</view>
				</view>
			</view>
		</view>
		<view class="guizeFoot">
			<text>让我们一起在法语学习的道路上努力前行，登上排行榜的巅峰!</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mainList: [
					{
						title: '一、积分排行依据',
						list: 
						[
							'1、<span style="color: #FE8106">课程观看时长：</span>记录你在 小程序上观看课程视频的累计时长。观看1次完整视频得10分，重复观看2次得20分，最高上限40分，未完整观看视频不得分。',
							'2、<span style="color: #FE8106">互动参与度：</span>积极参与小程序的课程互动，如互动答题会根据互动结果奖励不同积分。',
							'3、单个互动题进行多次解答，系统会取最高分，若已获得最高分5积分，后续再刷题，分数不会有变化。'
						]
					},
					{
						title: '二、更新频率',
						list: 
						[
							'积分排行榜将每日24点更新一次，确保能及时了解自己的积分排名变化。'
						]
					},
					{
						title: '三、展示规则',
						list: 
						[
							'1、各班级范围内进行积分展示。',
							'2、多个班级的学员会看到多个不同排行榜，默认展示当前正在学习的班级排行榜。',
							'3、若未加入任何班级，则排行榜为空。'
						]
					},
					{
						title: '四、注意事项',
						list: 
						[
							'1、鼓励大家通过按时打卡、勤加练习提升自己的积分排行。',
							'2.  如有任何疑问或建议，可以随时联系课程咨询顾问，我们将竭诚为您服务。'
						]
					}
				],
				newData: []
			}
		},
		/**
		 * 页面加载时触发
		 * 一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数
		 */
		onLoad(options) {
			console.log('onLoad: 页面加载时触发，获取 query 参数');
		},

		/**
		 * 页面显示时触发
		 * 每次打开页面都会触发
		 */
		onShow() {
			console.log('onShow: 页面显示时触发');
		},

		/**
		 * 页面初次渲染完成时触发
		 * 一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互
		 */
		onReady() {
			console.log('onReady: 页面初次渲染完成时触发');
		},

		/**
		 * 页面隐藏时触发
		 * 例如从 A 页面跳转到 B 页面时，A 页面的 onHide 会被触发
		 */
		onHide() {
			console.log('onHide: 页面隐藏时触发');
		},

		/**
		 * 页面卸载时触发
		 * 例如当页面被关闭或路由切换时
		 */
		onUnload() {
			console.log('onUnload: 页面卸载时触发');
		},
		methods: {
			//播放音乐
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/static/styles/variables.scss";
	.container {
		position: relative;
		background-color: #FFB607;
		height: 100vh;
		
		display: flex;
		  flex-direction: column;
		  align-items: center;
		  justify-content: center;
	}
	.guizeHeard{
		width: 360rpx;
		height: 80rpx;
		background: #3CAB7E;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		text-align: center;
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 40rpx;
		color: #FEFEFE;
		line-height: 80rpx;
	}
	.guizeMain{
		width: 650rpx;
		height: 1080rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
	}
	.guizeMainCase{
		padding-top: 50rpx;
		padding-left: 60rpx;
		padding-right: 50rpx;
	}
	.guizeMainTitle{
		width: 310rpx;
		height: 60rpx;
		margin-top: 30rpx;
		background: #FF8106;
		border-radius: 30rpx;
		text-align: center;
		
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 60rpx;
	}
	.guizeMainText{
		margin-top: 10rpx;
		padding-left: 20rpx;
		padding-right: 10rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 20rpx;
		color: #666666;
		line-height: 30rpx;
	}
	.guizeFoot{
		margin-top: 20rpx;
		width: 650rpx;
		height: 56rpx;
		background-image: url(#{$bgImageUrl}/assets/guizeBG.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		text-align: center;
		
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 20rpx;
		color: #FF8106;
		line-height: 56rpx;
	}
</style>